<script setup lang="ts">
import BpmnViewer from "bpmn-js";
/* bpmn-js 主体依赖 */
import BpmnModeler from "bpmn-js/lib/Modeler";
import { onMounted, ref } from "vue";
import { xmlStr } from "../../mock/xmlStr"; // 这里是直接引用了xml字符串
/* 要渲染的bpmn文件内容（实质为xml） */
import testDiagram from "../../mock/diagram.bpmn";

/* bpmn-js 左侧工具栏 */
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
/* bpmn-js 右侧属性栏 */
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'

const canvasRef = ref();
const bpmnModeler = ref(null);
const init = () => {
  const canvas = canvasRef.value;
  if (!canvas) {
    return;
  }
  bpmnModeler.value = new BpmnModeler({
    container: canvas,
    // 控制板
    propertiesPanel: {
      parent: '#js-properties-panel'
    },
    // 插件
    additionalModules: [
      propertiesPanelModule,
      propertiesProviderModule,  // 右侧属性栏
    ],
  });
  createNewDiagram();
};
const createNewDiagram = () => {
   bpmnModeler.value.importXML(xmlStr)
    .then((warnings) => { 
      console.log('success!', warnings);     
 })
    .catch((error) => { console.log('error', error) })
  // bpmnModeler.value.importXML(xmlStr, (err) => {
  //   if (err) {
  //   } else {
  //     success();
  //   }
  // });
};
const success = () => {
  console.log('创建成功')
};

onMounted(() => {
  init();
});
</script>
<template>
  <div class="containers">
    <div class="canvas" ref="canvasRef"></div>
      <div id="js-properties-panel" class="panel"></div>
  </div>
</template>

<style lang="scss" scoped>
 /*左边工具栏以及编辑节点的样式*/
  // @import '~bpmn-js/dist/assets/diagram-js.css';
  // @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
  // @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
  // @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';


.containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.canvas {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
</style>
